<template>
	<view class="container">

		<scroll-view scroll-y="true" class="con" lower-threshold="20" @scrolltolower="add">


			
			<!-- 小程序头部兼容 -->
			<!-- #ifdef MP -->
			<view class="mp-search-box">
				<input class="ser-input" type="text" value="输入关键字搜索" />
			</view>
			<!-- #endif -->
			<!-- 头部轮播 -->
			<image :src="shopDetail.head_image" class="over-view" mode="aspectFill" v-if="id!='2651983721271552'"></image>
			<view class="toHead" v-if="id!='2651983721271552'">
				<view class="l" @click="back">
					<image src="../../static/img/1/25.png" mode=""></image>
				</view>
				<view class="input" @click="toserach">
					<input type="text">
					<view class="bu">
						<image src="../../static/img/2/2-26.png" mode=""></image>
					</view>
				</view>
				<view class="r">
					<!-- <image src="../../static/img/1/91.png" mode=""></image> -->
				</view>
			</view>
			<view class="header-box" @click="to(data.id)" v-if="id!='2651983721271552'">
				<view class="header-img">
					<image :src="shopDetail.logo" mode="aspectFill"></image>
				</view>
				<view class="header-info">
					<text class="name clamp">{{data.cShopShowName}}</text>
					<!-- <text class="fans">粉丝数：98700</text> -->
				</view>
				<view class="header-collect" @click.stop="toFavorite">
					<image :src="isSelected?'/static/img/3/3-125.png':'/static/img/3/3-126.png'" mode="aspectFit"></image>{{isSelected?'取消':'关注'}}
				</view>
			</view>
			<view class="tab-box" v-if="id!='2651983721271552'">
				<text class="item" :class="{'active':ac==m.id}" @click="act(m)" v-for="m in menu" :key="m.id">{{m.name}}</text>
			</view>
			<view class="toHeads" v-if="id=='2651983721271552'">
				<view class="l" @click="back">
					<image src="../../static/img/1/26.png" mode=""></image>
				</view>
				<view class="input" @click="toserach">
					<input type="search" placeholder="请输入搜索名称">
					<!-- <view class="bu">
						<image src="../../static/img/2/2-26.png" mode=""></image>
					</view> -->
				</view>
				<view class="r">
					<!-- <image src="../../static/img/1/91.png" mode=""></image> -->
				</view>
			</view>
			<view class="tab-boxs" v-if="id=='2651983721271552'">
				<text class="item" :class="{'active':ac==m.id}" @click="act(m)" v-for="m in menu" :key="m.id">{{m.name}}</text>
			</view>

			<indexs v-if="type == 1&&id!=2651983721271552" :shop_id='id' :shop="data" :img="shopDetail.mid_images_arr"></indexs>
			<indexss v-if="type == 1&&id==2651983721271552" :shop_id='id' :shop="data" :img="shopDetail.mid_images_arr"></indexss>
			<commodity v-if="type == 2" :shop_id='id'></commodity>
			<news v-if="type == 3" :shop_id='id'></news>
			<hot v-if="type == 4" :shop_id='id'></hot>
			<activity v-if="type == 5" :shop_id='id'></activity>

		</scroll-view>
		<footers :types='1' :id='id'></footers>
	</view>
</template>

<script>
	import indexs from '@/components/shop/shopsindex.vue';
	import indexss from '@/components/shop/shopsindex1.vue';
	import commodity from '@/components/shop/commodity.vue';
	import news from '@/components/shop/new.vue';
	import hot from '@/components/shop/hot.vue';
	import activity from '@/components/shop/activity.vue';
	import footers from '@/components/shop/footer.vue';
	export default {
		components: {
			indexs,
			indexss,
			commodity,
			news,
			hot,
			activity,
			footers
		},
		data() {
			return {
				FavoriteCount:0,
				ac: '',
				data: {
					cAdvImageUrl: ''
				},
				menu: [],
				type: '',
				id: '',
				shopDetail: {},
				isSelected: false,
				collection: [],
				currentId:''
			};
		},
		
		async onLoad(options) {
			this.id = options.id

			let that = this
			if (that.$SysCache.get('token')) {
				that.$Request.post(
					that.$api.httpApi.goods.getShopFavorites + '&token=' + that.$SysCache.get('token'),{notLoad:true}
				).then(res => {
					if (res.code == 200) {
						that.collection = res.data.pager.data;
						if (that.collection.length > 0) {
							// this.isSelected = true
							res.data.pager.data.forEach(item=>{
								if(item.shopid == this.id){
									this.currentId = item.id
									this.isSelected = true
								}
							})
						} else {
							this.isSelected = false
						}

					}
				});
			}
			this.$Request.post(
				this.$api.httpApi.brand.getShopById, {
					"id": options.id
				}
			).then(res => {
				if (res.code == 200) {
					this.data = res.data
				}
			})
			this.$Request.post(
				this.$api.httpApi.home.getFavoriteCount, {
					"id": options.id,
					token:that.$SysCache.get('token')
				}
			).then(res => {
				if (res.code == 200) {
					this.FavoriteCount = res.data
				}
			})

			this.$Request.post4(
				this.$api.httpApi.home.shopmenu, {
					"shop_id": options.id
				}
			).then(res => {
				if (res.code == 1) {
					this.menu = res.data
					if (res.data.length > 0) {
						this.ac = res.data[0].id
						this.type = res.data[0].type
					}

				}
			})
			this.$Request.post4(
				this.$api.httpApi.home.shopdetail, {
					"shop_id": options.id
				}
			).then(res => {
				if (res.code == 1) {
					console.log('res.data', res)
					this.shopDetail = res.data

				}
			})
		},
		
		methods: {
			//收藏
			getFav(str){
				this.isSelected = str
			},
			toFavorite() {
				let datas = {
					"ids": [this.data.id],
					"token": this.$SysCache.get('token') || null,
				}
				let delData = {
					"ids": [this.currentId],
					"token": this.$SysCache.get('token') || null,
				}
				let that = this;
				if (this.isSelected) {
					this.$Request.post(this.$api.httpApi.goods.delFavorites + "&token=" + this.$SysCache.get('token'),
						delData).then(
						res => {
							if (res.code == 200) {

								that.isSelected = false
								//接收传值,id里面放的是标题，因为测试数据并没写id 

								if (that.$SysCache.get('token')) {
									that.$Request.post(
										that.$api.httpApi.goods.getShopFavorites + '&token=' + that.$SysCache.get('token'),
									).then(res => {
										if (res.code == 200) {
											that.collection = res.data.pager.data;
											if (that.collection.length > 0) {
												res.data.pager.data.forEach(item=>{
													if(item.shopid == that.id){
														that.currentId = item.id
														that.isSelected = true
													}
												})
											} else {
												that.isSelected = false
											}
										}
									});
								}
								uni.showToast({
									title: res.message,
									duration: 2000
								})
							}
						})

				} else {
					this.$Request.post(this.$api.httpApi.goods.addShopFavorit + "&token=" + this.$SysCache.get('token'), datas).then(
						res => {
							if (res.code == 200) {


								//接收传值,id里面放的是标题，因为测试数据并没写id 

								if (that.$SysCache.get('token')) {
									that.$Request.post(
										that.$api.httpApi.goods.getShopFavorites + '&token=' + that.$SysCache.get('token'),
									).then(resq => {
										if (resq.code == 200) {
											that.collection = resq.data.pager.data;
											if (that.collection.length > 0) {
												resq.data.pager.data.forEach(item=>{
													if(item.shopid == that.id){
														that.currentId = item.id
														that.isSelected = true
													}
												})
											} else {
												that.isSelected = false
											}
										}
									});
								}
								uni.showToast({
									title: res.message,
									duration: 2000
								})
							}
						})
				}
			},
			to(id) {
				uni.navigateTo({
					url: '/pages/inner/shopDift?id=' + id
				})
			},
			act(item) {
				this.ac = item.id
				this.type = item.type
				if(this.type == '6'){
					uni.navigateTo({
						url:'/pages/inner/shopstyle?id='+this.id
					})
				}
				else if(this.type == '8'){
					uni.navigateTo({
						url:'/pages/inner/cate?id='+this.id
					})
				}
				else if(this.type == '7'){
					uni.navigateTo({
						url:'/pages/inner/webview?url='+item.link+'&type=1'
					})
					// window.location.href = item.link
				}
			},
			back() {
				// uni.navigateBack()
				//退出子应用桥接
				//成功回调
				window.onCloseSuccess = function(message) {
					console.log(message)
				}
				//失败回调
				window.onCloseError = function(message) {
					console.log(message)
				}
				try {
					let postParam = {
						className: "BaseBridge",
						function: "closeWebView",
						successCallBack: "onSuccess",
						failCallBack: "onError"
					}
					HandBridge.postMessage(JSON.stringify(postParam));
				} catch (err) {
					console.log(err)
					uni.navigateBack()
				}
			},
			toserach() {
				uni.navigateTo({
					url: `/pages/search/search?shop_id=` + this.id
				})
			},

		},


	}
</script>

<style lang="scss" scoped>
	.con {
		height: calc(100vh - 108upx);
		background-color: #fff;

	}

	.times {
		width: 690rpx;
		margin: auto;
		background-color: #fff;
		padding-bottom: 25rpx;
		padding-top: 40rpx;
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 50rpx;

		.text {
			display: inline-block;
			vertical-align: middle;
			margin-left: 37rpx;

			.name {
				margin-top: 28rpx;
				font-size: 34rpx;
				font-family: CTBiaoSongSJ;
				font-weight: 400;
				color: #FF4267;
			}

			.p {
				margin-top: 6rpx;
				font-size: 22rpx;
				font-family: CTBiaoSongSJ;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.74);
			}

			.money {
				width: 156rpx;
				height: 43rpx;
				background: #FF3058;
				border-radius: 22rpx;
				margin-top: 37rpx;
				text-align: center;
				line-height: 43rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
			}

			.co {

				.ho {
					display: inline-block;
					vertical-align: middle;
					width: 48rpx;
					height: 42rpx;
					background: #000000;
					border-radius: 15rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				text {
					display: inline-block;
					vertical-align: middle;
					margin-left: 9rpx;
					margin-right: 9rpx;
					font-size: 40rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		image {
			display: inline-block;
			vertical-align: middle;
			width: 303rpx;
			height: 231rpx;
		}
	}

	/* #ifdef MP */
	.mp-search-box {
		position: absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
			border-radius: 40upx;
		}
	}

	page {

		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}
	}

	/* #endif */


	page {
		position: relative;
		background: #fff;
		height: 100%;
		overflow: hidden;
	}

	.container {
		height: 100%;
		
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;

		// background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 23upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);

			image {
				width: 92upx;
				height: 90upx;
			}
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 90upx;
			// height: 65upx;
			margin-bottom: 14upx;
			// border-radius: 50%;
			// opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 今日优选 */
	.seckill-section {
		padding: 4upx 30upx 24upx;

		.qu {
			display: inline-block;
			vertical-align: middle;
			width: 240rpx;
			height: 98rpx;
			background: #3E9B89;
			box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
			margin-right: 23rpx;

			.l {
				display: inline-block;
				vertical-align: middle;
				width: 194rpx;
				height: 98rpx;
				background: linear-gradient(139deg, #A6D68C, #1AC2A4);
				box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
				text-align: center;

				.money {
					font-size: 40rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10rpx;

					text {
						font-size: 26rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.xian {
					font-size: 18rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.r {
				display: inline-block;
				vertical-align: middle;
				white-space: normal;
				width: 46rpx;
				height: 98rpx;
				background-color: #DD4361;
				text-align: center;
				font-size: 16rpx;
				padding-top: 8rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		// background: #fff;
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			margin-right: 26upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 250upx;
			line-height: 1.8;
			border-radius: 6upx;
			position: relative;

			.bac-index {
				height: 250upx;
				width: 250upx;
			}

			.look-more {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 250upx;
				width: 250upx;
				background: #f0f0f0;
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
				color: #666;
			}

			.white-img {
				height: 250upx;
				width: 250upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			}

			.title {
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
				font-size: 23upx;
			}

			.price {
				font-size: 26upx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: rgba(240, 64, 111, 1);
			}

			.new {
				position: absolute;
				top: 0;
				left: 0;
				width: 98upx;
				height: 32upx;
				background: rgba(77, 200, 151, 1);
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 32upx;
			}

			.ranking {
				position: absolute;
				top: 24upx;
				left: 13upx;
				width: 43upx;
				height: 43upx;
				background: rgb(206, 167, 109) !important;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 50%;

			}

		}
	}

	.over-view {
		opacity: 1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 503upx;
		z-index: 5;
		// filter: blur(3upx);
		border-bottom-left-radius: 50upx;
		border-bottom-right-radius: 50upx;
		// -webkit-filter: blur(4upx);
		// -moz-filter: blur(4upx);
		// -o-filter: blur(4upx);
		// -ms-filter: blur(4upx);
		// filter: blur(4upx);
	}

	.toHead {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		height: 95rpx;
		z-index: 10;
		line-height: 95rpx;

		.r {
			width: 95rpx;
			height: 95rpx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 108rpx;

			image {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.input {
			width: 548rpx;
			height: 56rpx;
			background: rgba(255, 255, 255, 0.34);
			display: inline-block;
			vertical-align: middle;
			margin-left: 6rpx;
			margin-right: 6rpx;
			line-height: normal;
			border-radius: 40upx;
			input {
				display: inline-block;
				height: 56rpx;
				width: calc(100% - 56rpx);
				vertical-align: middle;
				float: left;
				padding-left: 15rpx;
				color: #fff;
			}

			.bu {
				width: 56rpx;
				height: 56rpx;
				line-height: 56rpx;
				display: inline-block;
				vertical-align: middle;
				text-align: center;

				float: left;

				image {
					display: inline-block;
					width: 29rpx;
					height: 29rpx;
					vertical-align: middle;
				}
			}
		}

		.l {
			width: 95rpx;
			height: 95rpx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 108rpx;

			image {
				display: inline-block;
				width: 21rpx;
				height: 39rpx;
			}
		}
	}
	.toHeads {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		height: 95rpx;
		z-index: 10;
		line-height: 95rpx;
	
		.r {
			width: 95rpx;
			height: 95rpx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 108rpx;
	
			image {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
		}
	
		.input {
			width: 631upx;
			height: 80upx;
			background: #F4F4F4;
			// display: inline-block;
			vertical-align: middle;
			margin-left: 6rpx;
			margin-right: 6rpx;
			line-height: normal;
			border-radius: 40upx;
			display: inline-flex;
			justify-content: flex-start;
			align-items: center;
			input {
				display: inline-block;
				height: 56rpx;
				width: calc(100% - 56rpx);
				vertical-align: middle;
				float: left;
				padding-left: 41rpx;
				color: #fff;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #999999;
			}
	
			.bu {
				width: 56rpx;
				height: 56rpx;
				line-height: 56rpx;
				display: inline-block;
				vertical-align: middle;
				text-align: center;
	
				float: left;
	
				image {
					display: inline-block;
					width: 29rpx;
					height: 29rpx;
					vertical-align: middle;
				}
			}
		}
	
		.l {
			width: 95rpx;
			height: 95rpx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 108rpx;
	
			image {
				display: inline-block;
				width: 21rpx;
				height: 39rpx;
				transform: rotate(180deg)
			}
		}
	}
	.header-box {
		position: absolute;
		width: 100%;
		top: 180upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 26upx;
		z-index: 10;

		.header-img {
			width: 104upx;
			height: 104upx;
			border-radius: 20upx;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.header-info {
			width: 60%;
			color: #fff;

			.name {
				display: block;
				font-size: 29upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
			}

			.fans {
				display: block;
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
			}
		}

		.header-collect {
			width: 94upx;
			height: 53upx;
			border-radius: 30upx;
			display: inline-flex;
			text-align: right;
			justify-content: center;
			align-items: center;

			image {
				width: 26upx;
				height: 26upx;
				margin-right: 9upx;

			}

			font-size:23upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color: #fff;
			border: 2upx solid #fff;
		}
	}

	.tab-box {
		position: absolute;
		z-index: 10;
		width: 100%;
		top: 360upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 26upx;
		font-size: 23upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #fff;

		text {
			padding-bottom: 10upx;

		}

		.active {
			border-bottom: 2upx solid #fff;
		}

	}
	.tab-boxs {
		position: absolute;
		z-index: 10;
		width: 100%;
		top: 134upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 43upx;
		font-size: 35upx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	
		text {
			padding-bottom: 15upx;
	
		}
	
		.active {
			border-bottom: 3upx solid #A87C60;
			color: #A87C60;
		}
	
	}
	/*商品列表*/
	.goodslist {
		padding: 0 26upx;

		.list-item {
			background: #fff;
			padding: 26upx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 31upx;
			border-radius: 16upx;

			image {
				width: 370upx;
				height: 289upx;

			}

			.list-info {
				padding: 0 30upx;

				.name {
					display: block;
					font-size: 40upx;
					font-family: CTBiaoSongSJ;
					font-weight: 400;
					color: rgba(255, 66, 102, 1);

				}

				.desc {
					display: block;
					font-size: 25upx;
					font-family: CTBiaoSongSJ;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);

				}

				.price {
					width: 163upx;
					height: 45upx;
					background: rgba(255, 47, 87, 1);
					border-radius: 22upx;
					font-size: 25upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 33upx;
				}

			}

			.left {
				image {}
			}
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 377upx;
			box-sizing: content-box;
		}


		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 856upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 702rpx;
		margin: auto;
		overflow: hidden;
		height: 856upx;
		position: relative;
		z-index: 10;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}


	/* 活动优惠 */
	.activity {
		padding: 4upx 30upx 24upx;

		// background: #fff;
		.f-header {
			display: flex;
			align-items: center;
			height: 115upx;
			padding: 6upx 30upx 8upx;

			.tit-box {
				flex: 1;
				display: flex;
				// flex-direction: column;
				justify-content: center;
				align-items: center;

				.tit {
					display: inline-block;
					font-size: 29upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(4, 0, 0, 1);
					margin: 0 10upx;
				}

				.line {
					display: inline-block;
					width: 15upx;
					height: 2upx;
					background: rgba(102, 102, 102, 1)
				}
			}


		}

		.goods-box {
			display: flex;

			.left {
				width: 343upx;
				margin-right: 13upx;
				display: flex;
				flex-wrap: wrap;

				.top {
					width: 100%;
					height: 303upx;
					margin-bottom: 17upx;
					position: relative;

					.timer {

						color: #fff;
						position: absolute;
						z-index: 1;
						bottom: 40upx;
						left: 28upx;
						font-size: 23upx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: rgba(255, 255, 255, 1);
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bottom {
					width: 100%;
					height: 303upx;
					position: relative;

					.title {
						color: #fff;
						position: absolute;
						z-index: 1;
						bottom: 40upx;
						left: 28upx;
						font-size: 23upx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: rgba(255, 255, 255, 1);
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				width: 343upx;
				display: flex;
				flex-wrap: wrap;

				.top {
					width: 100%;
					height: 198upx;
					margin-bottom: 14upx;
					position: relative;

					.timer {
						font-size: 19upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						position: absolute;
						bottom: 36upx;
						left: 26upx;
						z-index: 1;
					}

					.hot {
						font-size: 18upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						position: absolute;
						top: 26upx;
						left: 26upx;
						z-index: 1;
						width: 45upx;
						height: 26upx;
						background: rgb(240, 64, 111);
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bottom {
					width: 100%;
					height: 198upx;
					position: relative;
					margin-bottom: 14upx;

					.timer {
						font-size: 19upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						position: absolute;
						bottom: 36upx;
						left: 26upx;
						z-index: 1;
					}

					.hot {
						font-size: 18upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						position: absolute;
						top: 26upx;
						left: 26upx;
						z-index: 1;
						width: 45upx;
						height: 26upx;
						background: rgb(240, 64, 111);
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.mp-search-box {
		position: fixed;
		left: 0;
		top: 0;
		height: 90upx;
		z-index: 9999;
		width: 100%;
		padding: 0 26upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
	
		// .ser-input {
		// 	flex: 1;
		// 	height: 56upx;
		// 	line-height: 56upx;
		// 	text-align: center;
		// 	font-size: 28upx;
		// 	color: $font-color-base;
		// 	border-radius: 20px;
		// 	background: rgba(255, 255, 255, .6);
		// }
		.titles {
			// margin-left: 35%;
			width: 30%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}
	
		.back {
			width: 30%;
	
			image {
				width: 20upx;
				// height: 29upx;
	
			}
		}
	
		.icon-box {
			width: 30%;
			display: flex;
			align-items: baseline;
			justify-content: flex-end;
	
			.searchImg {
				width: 41upx;
				// height: 30upx;
				margin-left: 40upx;
			}
	
			.yticon {
				margin-right: 10upx;
				font-size: 37upx;
				color: #fff;
	
				&:active {
					color: #f00;
				}
			}
	
			.messagebox {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
	
				image {
					width: 45upx;
					// height: 37upx;
				}
	
				
					.numb {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 25upx;
						height: 25upx;
						background: #CCA66A;
						border-radius: 50%;
						position: absolute;
						right: -5rpx;
						top: -5rpx;
						font-size: 14upx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #FFFFFF;
					}
				
			}
		}
	}
</style>
